<template>
  <el-menu
    class="menu"
    :default-active="active"
    :collapse="isCollapse">
    <header class="menu-header">
      <template v-if="isCollapse">
        会议室管理系统
      </template>
      <template v-else>
        会议室管理系统
      </template>
    </header>
    <ul class="menu-ul" :class="{'el-menu--collapse': isCollapse}">
      <menu-item
        v-for="(item, index) in menuData"
        :key="index"
        :item-data="item"
        :is-collapse="isCollapse"></menu-item>
    </ul>
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem'
export default {
  name: "Menu",
  components: { MenuItem },
  props:{
    isCollapse: Boolean,
  },
  mounted(){
    this.$yAxios({
      url: this.$api.system.queryAuthMenu,
    }, info => {
      this.menuData = info;
      this.$bus.$emit('redirect', this.firstMenu());
    }, e => {
      this.$bus.$emit('redirect', null);
    })
  },
  data(){
    return {
      menuData: [],
      active: ''
    }
  },
  methods:{
    //获取menu数据中第一个菜单（可跳转项）
    firstMenu(ary = this.menuData){
      for(let i=0;i<ary.length;i++){
        let item = ary[i];
        if(item.menuRouter && item.menuType === '1') return item;
        else if(item.children) return this.firstMenu(item.children);
      }
      return null
    }
  },
}
</script>

<style scoped lang="less">
@menu-bg: #304156;
@menu-color: #fff;
.el-menu{
  &:not(.el-menu--collapse){
    width: 200px;
  }
  height: 100%;
  background: @menu-bg;
  color: @menu-color;
  position: relative;
  border-right: none;
  .menu-header{
    height: 60px;
    background: @common-color;
    line-height: 60px;
    font-size: 17px;
    font-weight:bold;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    overflow: hidden;
    border-bottom: 1px solid @menu-bg;
  }
  .el-menu--collapse{
    >.el-menu-item{
      text-align: center;
    }
  }
  /deep/ .menu-ul{
    height: calc(100% - 61px);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    .el-menu{
      background: @menu-bg;
    }
    >.el-menu-item{
      /* 这段代码是将一级菜单居中对齐的 */
      /*text-align: center;
      padding: 0!important;*/
    }
    .el-menu-item{
      color: inherit;
      i{
        color: inherit;
      }
      &.is-active{
        color: inherit;
      }
      &:hover{
        background: @menu-bg;
        >a{
          outline: 0;
          color: #fff;
        }
      }
      >a{
        display: block;
        text-decoration: none;
        color: inherit;
        &.router-link-exact-active{
          outline: 0;
          color: #fff;
        }
      }
    }
    .el-submenu__title{
      text-align: center;
      color: inherit;
      &:hover{
        background: @menu-bg;
        color: #fff;
      }
      >i{
        color: inherit;
      }
    }
    &:not(.el-menu--collapse) .el-submenu__title{
      padding-right: 40px;
      display: flex;
      align-items: center;
    }
    &:not(.el-menu--collapse) i.menu-icon{
      margin-right: 4px;
      font-size: inherit;
    }
  }
}
</style>
